<template>
  <div class="forecase-panel">
    <div class="forecase-panel__header">
      <div class="forecase-panel__header-title">
        <image :src="curWeatherWithAge.icon" />
        <span>{{ curWeatherWithAge.name }}</span>
      </div>
      <div className="forecase-panel__header-tips" @tap="onOpenTips">
        <image src="@/assets/home/icon-info-fill.png" class="icon-info" />
        <span>防护建议</span>

        <image src="@/assets/home/icon-arrow-right.png" class="icon-arrow" />
      </div>
    </div>
    <div class="forecase-panel__content">
      <div class="forecase-panel__days">
        <div v-if="todayRishWeather" class="forecase-panel__days-item">
          <span class="label">今天</span>
          <DashedLine v-model="todayRishWeather.riskLevelCode" />
        </div>
        <div v-if="tomorrowRiskWeather" class="forecase-panel__days-item">
          <span class="label">明天</span>
          <DashedLine v-model="tomorrowRiskWeather.riskLevelCode" />
        </div>
      </div>

      <RiskGroup :data="todayWeather" />
    </div>

    <nut-popup v-model:visible="show" pop-class="tip-popup">
      <image
        src="@/assets/home/icon-close-circel.png"
        class="close-btn"
        @tap="onClose"
      />
      <div class="tip-popup__header">
        <CommonSwitch v-model="tipActive" :options="options" />
      </div>
      <div class="tip-popup__content">
        <div class="tips-group">
          <image src="@/assets/home/icon-info-fill.png" class="icon-info" />
          <span class="info-label">防护建议</span>
        </div>
        <div class="tips-content">
          {{ suggestion }}
        </div>
        <div class="tips-source">数据来源：上海市气象与健康重点实验室</div>
      </div>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import CommonSwitch from "@/components/common-switch/index.vue";
import DashedLine from "@/components/common-progress/dashed-line.vue";
import RiskGroup from "./risk-group.vue";
import { computed, ref } from "vue";
import { IWeatherItem } from "@/apis/types/home";
import { IWeatherCodeEnum } from "@/constants/index";

import hf from "@/assets/home/icon-hf.png";
import ertongganmao from "@/assets/home/icon-ertonggm.png";
import lnrgm from "@/assets/home/forecase-header.png";
import zs from "@/assets/home/icon-zs.png";
import mzf from "@/assets/home/icon-mxb.png";
import qnjcrgm from "@/assets/home/icon-gm.png";

defineOptions({
  name: "forecase-panel",
});

const props = withDefaults(
  defineProps<{
    data: IWeatherItem[];
  }>(),
  {
    data: () => [],
  }
);

enum DayTypeEnum {
  TODAY = "today",
  TOMORROW = "tomorrow",
}

const options = [
  { label: "今天", value: DayTypeEnum.TODAY },
  { label: "明天", value: DayTypeEnum.TOMORROW },
];

const show = ref(false);
const tipActive = ref(DayTypeEnum.TODAY);

const curWeatherCode = computed(() => {
  const age = 66;
  let code: string[] = [];
  if (age > 65) {
    code = [IWeatherCodeEnum.LNGM, IWeatherCodeEnum.LRGM];
  } else if (age >= 16) {
    code = [IWeatherCodeEnum.QNGM, IWeatherCodeEnum.QRGM];
  } else {
    code = [IWeatherCodeEnum.CNGM, IWeatherCodeEnum.CRGM];
  }

  return code;
});

const curWeatherWithAge = computed(() => {
  const temp = (weatherWithIcon.value || []).find((item) =>
    curWeatherCode.value.includes(item.code)
  );
  return temp || ({} as IWeatherItem);
});

const todayRishWeather = computed(() => {
  const result = weatherWithIcon.value.filter(
    (item) => curWeatherCode.value.includes(item.code) && item.isTomorrow === 0
  );
  if (result.length) {
    return result[0];
  }
  return null;
});

const tomorrowRiskWeather = computed(() => {
  const result = weatherWithIcon.value.filter(
    (item) => curWeatherCode.value.includes(item.code) && item.isTomorrow === 1
  );
  if (result.length) {
    return result[0];
  }
  return null;
});

const suggestion = computed(() => {
  switch (tipActive.value) {
    case DayTypeEnum.TODAY:
      return (
        (todayRishWeather.value &&
          todayRishWeather.value.preventionSuggestion) ||
        ""
      );
    case DayTypeEnum.TOMORROW:
      return (
        (todayRishWeather.value &&
          tomorrowRiskWeather.value?.preventionSuggestion) ||
        ""
      );
    default:
      return "";
  }
});

const todayWeather = computed(() => {
  return (weatherWithIcon.value || []).filter((item) => item.isTomorrow === 0);
});

const weatherWithIcon = computed(() => {
  const { data } = props;
  return (data || []).map((item) => {
    const { code } = item;
    let icon = null;
    switch (code) {
      case IWeatherCodeEnum.COPD:
        icon = mzf;
        break;
      case IWeatherCodeEnum.QNGM:
      case IWeatherCodeEnum.QRGM:
        icon = qnjcrgm;
        break;
      case IWeatherCodeEnum.CRGM:
      case IWeatherCodeEnum.CNGM:
        icon = ertongganmao;
        break;
      case IWeatherCodeEnum.HF:
      case IWeatherCodeEnum.POLLEN:
        icon = hf;
        break;
      case IWeatherCodeEnum.ZS:
        icon = zs;
        break;
      case IWeatherCodeEnum.LNGM:
      case IWeatherCodeEnum.LRGM:
        icon = lnrgm;
      default:
    }

    return { ...item, icon };
  });
});

const onOpenTips = () => {
  show.value = true;
};

const onClose = () => {
  show.value = false;
};
</script>

<style lang="less">
.forecase-panel {
  background-color: #fff;
  border-radius: 16px;
  padding: 24px 24px 0 24px;
  box-sizing: border-box;
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-title {
      display: flex;
      align-items: center;
      gap: 12px;
      image {
        width: 56px;
        height: 56px;
      }
      span {
        font-weight: 500;
        font-size: 32px;
        color: #000000;
      }
    }
    &-tips {
      display: flex;
      align-items: center;
      gap: 8px;

      border-radius: 20px;

      background: #ffebe4;
      border-radius: 20px;

      font-weight: 400;
      font-size: 24px;
      color: #ff5a5a;
      line-height: 24px;
      padding: 8px 16px;
      box-sizing: border-box;
      .icon-info {
        width: 24px;
        height: 24px;
      }
      .icon-arrow {
        margin-left: 30px;
        width: 24px;
        height: 24px;
      }
    }
  }

  &__days {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 38px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #d8d8d8;
    &-item {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 16px;

      font-weight: 400;
      font-size: 24px;
      color: #ff5a5a;
      line-height: 24px;
      padding: 8px 16px;
      box-sizing: border-box;
      .label {
        width: 60px;
      }
    }
  }

  &__tips {
    display: flex;
    align-items: center;
    gap: 4px;
    image {
      width: 24px;
      height: 24px;
    }
    margin: 24px 0;
    width: 100%;
    border-radius: 20px;

    background: #ffebe4;
    border-radius: 20px;

    font-weight: 400;
    font-size: 24px;
    color: #ff5a5a;
    line-height: 24px;
    padding: 8px 16px;
    box-sizing: border-box;
  }

  .tip-popup {
    width: 80%;
    box-sizing: border-box;
    padding: 28px 28px 10px 28px;
    background: linear-gradient(#ffebe4, #ffffff);
    border-radius: 20px;
    overflow-y: visible;
    .close-btn {
      position: absolute;
      transform: translate(-50%, 0);
      width: 56px;
      height: 56px;
      left: 50%;
      bottom: -100px;
    }
    &__header {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 48px;
    }
    &__content {
      .tips-group {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
        .icon-info {
          width: 36px;
          height: 36px;
        }
        .info-label {
          font-weight: 500;
          font-size: 32px;
          color: #ff5a5a;
          line-height: 44px;
        }
      }
      .tips-content {
        font-weight: 400;
        font-size: 28px;
        color: #000000;
        line-height: 44px;
        margin-bottom: 48px;
      }
      .tips-source {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 24px;
        color: #8b8b8b;
        line-height: 34px;
      }
    }
  }
}
</style>
